<template>
  <div v-if="pageFlag" style="margin-top: 30px;">
    <dv-percent-pond :config="cfg1" style="width: 100%;height: 110px;"></dv-percent-pond>
    <dv-percent-pond :config="cfg2" style="width: 100%;height: 110px;"></dv-percent-pond>
  </div>
  <reacquire v-else @click="getData"/>
</template>

<script>
import reacquire from '../../components/reacquire/reacquire.vue';
const fullWidth = 300
const borderGap = 3
const borderWidth = 3
const usefulWidth = fullWidth - (borderGap + borderWidth) * 2

const pieceLength = [0.25, 0.5, 0.25]
const pieceGap = 3

const lineDash = pieceLength
  .map(l => [usefulWidth * l, pieceGap])
  .reduce((all, current) => [...all, ...current], [])

export default {
  components: { reacquire },
  data() {
    return {
      pageFlag:false,
      timer:null,
      cfg1:{
        // 数据
        value:88,
        // 进度池配色
        // colors: ['#01c4f9', '#c135ff'],
        // 边框宽度
        // borderWidth:3,
        // 边框间隙
        // borderGap:3,
        // 线条间隙
        // lineDash:[5,1],
        // 文字颜色
        // textColor:'#fff',
        // 边框半径
        // borderRadius:5,
        // 局部渐变
        // localGradient:false,
        // 信息格式化
        // formatter:'{value}%',
      },
      cfg2:{
        // 数据
        value: 100,
        colors: ['#01c4f9', '#c135ff'],
        lineDash
      },
    };
  },
  filters: {
    
  },
  created() {
    this.getData()
  },
  mounted() {
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
      this.timer = null
    }
  },
  methods: {
    getData(){
      this.pageFlag=true
      this.switper
    },
    switper(){
      this.timer = setInterval(()=>{
        this.getData()
      },this.$store.state.setting.echartsAutoTime)
    }
  },
};
</script>
<style lang='scss' scoped>

</style>